import React, { Component } from 'react'
import Header from '../ui-components/Header'
import Tab from '../ui-components/Tab'
import Footer from '../ui-components/Footer'
import './index.css'
import one from './bookPicture/计网.jpg'
import two from './bookPicture/数据结构.jpg'
import theer from './bookPicture/操作系统.jpg' 
import four from './bookPicture/计算机组成.jpg'

export default class Book extends Component {
    state={
        index:0,
        isLogin:true,
        isLike:false,
        likeNumber:99,
    }
    onClick = (index) => {
        this.setState({ index })
    }
    confirm = (i) => {
        switch(i){
          case 0:
            this.props.history.push('/diss')
            break
          case 1:
            this.props.history.push('/navigation')
            break
          case 2:
            this.props.history.push('/book')
            break
          case 3:
            this.props.history.push('/member')
            break
          default:
            break
        }
      }
    render() {
        return (
            <div>
                {<Header items={['讨论','导航','书柜','成员','活动','发现'] } confirm = {this.confirm} ></Header> }
                <div className="book-tabs">
                    <Tab items={['程序猿脱发秘籍', '后端', '前端', '测开']}
                        color="black"
                        selectColor="rgb(27, 224, 238)"
                        onClick={this.onClick}></Tab> 
                </div>
                {this.state.index === 0 && (
                            <div className="book-show">
                                <div style={{ width: '100%', height: '24rem' }}>
                                    <div className="book-sub-show">
                                        <img src={one} alt="计网" className="book-picture" />
                                        <p style={{ fontSize: '1.5rem', fontFamily: 'cursive', marginLeft: '3rem' }}>作者：（美）库罗斯</p>
                                    </div>
                                    <div style={{ fontSize: '2rem' }}>
                                        <p>简介：</p>
                                        本书是当前世界上最为流行的计算机网络教科书之一，
                                        从应用层协议开始沿协议栈向下讲解，
                                        强调应用层范例和应用编程接口，本书的讲解以
                                        因特网为例，深入浅出地重点讲解
                                        计算机网络的基本原理。
                                        <p>重要指数：♥♥♥♥♥ 学习难度：♥♥♥♥♥</p>
                                        <a href="www.baidu.com" style={{ textDecoration: 'none' }}>阅读学习</a>
                                    </div>
                                </div>
                                <hr />
                                <div style={{ width: '100%', height: '24rem' }}>
                                    <div className="book-sub-show">
                                        <img src={two} alt="数据结构" className="book-picture" />
                                        <p style={{ fontSize: '1.5rem', fontFamily: 'cursive' }}>作者：Mark Allen Weiss (维斯)</p>
                                    </div>
                                    <div style={{ fontSize: '2rem' }}>
                                        <p>简介：</p>
                                        书中详细介绍了当前流行的论题和新的变化，讨论了算法设计技巧，
                                        并在研究算法的性能、效率以及对运行时间分析的基础上考查了一
                                        些高级数据结构，从历史的角度和近年的进展对数据结构的活跃领域
                                        进行了简要的概括。
                                        <p>重要指数：♥♥♥♥♥ 学习难度：♥♥♥♥♥/(ㄒoㄒ)/~~</p>
                                        <a href="www.baidu.com" style={{ textDecoration: 'none' }}>阅读学习</a>
                                    </div>
                                </div >
                                <hr />
                                <div style={{ width: '100%', height: '24rem' }}>
                                    <div className="book-sub-show">
                                        <img src={four} alt="计算机组成" className="book-picture" />
                                        <p style={{ fontSize: '1.5rem', fontFamily: 'cursive', marginLeft: '3rem' }}>作者：（美）库罗斯</p>
                                    </div>
                                    <div style={{ fontSize: '2rem' }}>
                                        <p>简介：</p>
                                        本书是当前世界上最为流行的计算机网络教科书之一，
                                        采用了作者独创的自顶向下的方法来讲授计算机网络的
                                        原理及其协议，本书的讲解以
                                        因特网为例，深入浅出地重点讲解
                                        计算机网络的基本原理。
                                        <p>重要指数：♥♥♥♥♥ 学习难度：♥♥♥♥♥</p>
                                        <a href="www.baidu.com" style={{ textDecoration: 'none' }}>阅读学习</a>
                                    </div>
                                </div>
                                <hr />

                                <div style={{ width: '100%', height: '24rem' }}>
                                    <div className="book-sub-show">
                                        <img src={theer} alt="操作系统" className="book-picture" />
                                        <p style={{ fontSize: '1.5rem', fontFamily: 'cursive', marginLeft: '3rem' }}>作者：（美）库罗斯</p>
                                    </div>
                                    <div style={{ fontSize: '2rem' }}>
                                        <p>简介：</p>
                                        本书是当前世界上最为流行的计算机网络教科书之一，
                                        采用了作者独创的自顶向下的方法来讲授计算机网络的
                                        原理及其协议，即从应用层协议开始沿协议栈向下讲解，
                                        强调应用层范例和应用编程接口，本书的讲解以
                                        因特网为例，深入浅出地重点讲解
                                        计算机网络的基本原理。
                                        <p>重要指数：♥♥♥♥♥ 学习难度：♥♥♥♥♥</p>
                                        <a href="www.baidu.com" style={{ textDecoration: 'none' }}>阅读学习</a>
                                    </div>
                                </div>
                            </div>
                    )}
                {this.state.index === 1 && (
                    <div className="book-show" style={{ height: '800rem' }}>
                       <h3>{this.state.isLogin?'欢迎回来':'请先登录'}</h3>
                       <button onClick={this.loginBtnClick}>{this.state.isLogin?'退出':'登录'}</button>
                       <h3>点赞人数{this.state.likeNumber}</h3>
                       <button onClick={this.likeOrUnlike}>{this.state.isLike?'取消点赞':'点赞'}</button>
                    </div>
                )}
             <Footer></Footer>  
            </div>
        )
    }
    loginBtnClick=()=>{
        this.setState({
            isLogin:!this.state.isLogin
        })
    }
    likeOrUnlike = ()=>{
        if(this.state.isLike){
            this.setState({isLike:false,likeNumber:this.state.likeNumber-1})
        }else{
            this.setState({isLike:true,likeNumber:this.state.likeNumber+1})
        }
    }
}
